#{extends 'main.html' /}

<div id="menu_right">
    <p>
        <a href="@{Stages.listStages}">Liste des stages</a>
    </p>
</div>

<h1 style="width:400px;">Détails du stage ${stage}</h1>
<div id="detail_stage">
    <p> <label><b> Description : </b></label> ${stage.description} </p>
    <p> <label><b> Code  : </b></label> ${stage.code} </p>
    <p> <label><b> Structure : </b></label> ${stage.structure} </p>
    <p> <label><b> Nature : </b></label> ${stage.nature} </p>
    <p> <label><b> Duree : </b></label> ${stage.duree} jour(s)</p> 
    <p> <label><b> Condition de déroulement : </b></label> ${stage.modalites} </p>
    <p> <label><b> Lieu : </b></label> ${stage.lieu} </p>
    <p> <label><b> Directeur : </b></label> 
        #{if stage.directeur == null}
        -
        #{/if}
        #{else}
        ${stage.directeur}
        #{/else}
    </p>
    <p> <label><b> Gestionnaire Administratif : </b> </label>
        #{if stage.gestionnaireAdmin == null}
        -
        #{/if}
        #{else}
        ${stage.gestionnaireAdmin}
        #{/else}
    </p>
    <p> <label><b> Etat : </b></label>  #{if stage.etat == null}
        -
        #{/if}
        #{else}
        ${stage.etat}
        #{/else}
    </p>
    <p> <label><b> Date de début  : </b></label> ${stage.dateDeb.format('dd MMMM yyyy', 'fr')} </p>
    <p> <label><b> Date de fin  : </b></label> ${stage.dateFin.format('dd MMMM yyyy', 'fr')} </p>
    <p> <label><b> Date d'examen  : </b></label> 
        #{if stage.dateExam == null}
        -
        #{/if}
        #{else}
        ${stage.dateExam.format('dd MMMM yyyy', 'fr')}
        #{/else}
    </p>
    <p> <label><b> Effectif minimum  : </b></label> ${stage.effectifMin} </p>
    <p> <label><b> Effectif maximum  : </b></label> ${stage.effectifMax} </p>   
    <p> <label><b> Effectif actuel  : </b></label> 
        #{if stage.effectif == null}
        -
        #{/if}
        #{else}
        ${stage.effectif}
        #{/else}
    </p>  
</div>
<div id="detail_stage_candidatures">
<h3>Modifier le stage ${stage.intitule}</h3>
#{form @modifStage()}
 
 <style type="text/css">
 	.hidden {
 		display: none;
	}
	.visible {
 		display: inline;
	}
</style>
	#{field 'idStage'}
		<input type="hidden" name="idStage" id="idStage" value="${idStage}" />
	#{/field}
    <p>
    #{field 'dateDeb'}
        <label for="dateDeb">Date de début (dd/mm/yyyy) :</label>
        #{if dateDeb == null}
            <input type="text" name="dateDeb" id="dateDeb" value="${dateDeb}" />
        #{/if}
        #{else}
            <input type="text" name="dateDeb" id="dateDeb" value="${dateDeb}" />
        #{/else}
    #{/field}
    </p>
    <p>
    #{field 'dateFin'}
        <label for="dateFin">Date de fin (dd/mm/yyyy) :</label>
        #{if dateFin == null}
            <input type="text" name="dateFin" id="dateFin" value="${dateFin}" />
        #{/if}
        #{else}
            <input type="text" name="dateFin" id="dateFin" value="${dateFin}" />
        #{/else}
    #{/field}
    <p>
    <p>
    	<label for="examen">La date d'examen est différente de la date de fin de stage :</label>
    	<input type="checkbox" id="checkB" name="examen" onClick="javascript:hide('hidden')"/>
    </p>
    <br/>
    <script type="text/javascript">
	function hide(id) {
		if (document.getElementById("checkB").checked) {
			document.getElementById(id).className = "visible";
		} 
		else {
			document.getElementById(id).className = "hidden";
		}
	}
  </script>
    <p id="hidden" class="hidden">
    	<br/>
	#{field 'dateExam'}
	    	<label for="dateExam">Nouvelle date d'examen : </label>
	    	#{if dateExam == null}
		    <input type="text" name="dateExam" id="dateExam" value="${dateExam}" />
		#{/if}
		#{else}
		    <input type="text" name="dateExam" id="dateExam" value="${dateExam}" />
		#{/else}
	#{/field}
    </p>
    <br />
    <p style="margin-top:30px">    
        <center><input type="submit" value="Enregistrer le stage" /></center>
    </p>
    <p><i>* Champs obligatoires<i></p>
    </div> 
#{/form}

